<template>
  <div>
    <main>
      <div v-for="(component,index) of components" :key="index" :class="{ 'active' : component.name == currentComponent }" @click="currentComponent = component.name">
        {{component.title}}
      </div>
    </main>
    <!-- keep-alive标签用于将组件缓存起来 -->
    <keep-alive>
      <component :is="currentComponent" ref="componet" />
    </keep-alive>
    <input type="text" v-model="web1.name" />{{web1.name}}
    <input type="text" v-model="web2" />{{web2}}

    <hr>

    <!-- 使用ref直接操作组件，相当于id,也可以直接调用子组件的方法 -->
    <button @click="callComponent">操作组件</button><input ref="input" type="text" />

    {{config}}
  </div>
</template>

<script>
  import Site from "./components/Site.vue"
  import Weixin from "./components/Weixin.vue"
  import config from "./config.js"
  //如果要让穿透的数据是响应式的，①引用数据类型②计算属性
  import { computed } from "vue"
  export default {
    components:{Site,Weixin},
    //数据穿透：在父组件中定义的provide数据可以穿透到任意层级的子组件（子组件用inject接收）
    // provide:{ webname:"数据穿透测试"},
    // 如果穿透的数据要取data中的数据，provide要写成函数
    provide(){
      return{
        webname1:this.web1,
        webname2:computed(() => this.web2),
        config:this.config
      }
    },
    data() {
      return{
        config,
        web1:{name:"穿透数据1"},
        web2:"穿透数据2",
        currentComponent:"weixin",
        components:[
          {title:"微信管理",name:"weixin"},
          {title:"网站信息",name:"site"}
        ]
      }
    },
    methods:{
      callComponent(){
        this.$refs.input.value = "houdunren.com";
        this.$refs.componet.show();
      }
    }
  }
</script>

<style lang="scss" scoped>
  main{
    display:flex;
    justify-content:space-around;
    p{
      font-weight: bold;
    }
    div{
      border: 1px solid #ddd;
      padding: 10px;
      cursor: pointer;
      transition:0.5s;
      &.active{
        background:#16a085;
        color: #fff;
      }
    }
  }
</style>
